<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      loop
      touchable
      :show-indicators="false"
    >
      <van-swipe-item v-for="obj in topicList" :key="obj.id">
        <img class="item_img" :src="obj.item_pic_url" alt="" />
        <p class="title">{{ obj.title }} <span class="price"> $ {{obj.price_info}}</span></p>
        <p class="subtitle">{{ obj.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "TopicList",
  props: {
    topicList: {
      type: Array,
    },
  },
};
</script>

<style scoped lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #fff !important;
}
.item_img {
  width: 100vw;
  height: 416px;
}
::v-deep .van-swipe-item {
  min-height: 530px !important;
  font-size: 28px;
  line-height: 40px;
  display: flex;
  flex-direction: column;
//   border-bottom: 1px solid #000;
}
.title {
  color: rgb(47, 47, 47);
}
.subtitle {
  color: rgb(153, 153, 153);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.title,
.subtitle {
  line-height: 50px;
  // color: #f00;
  font-size: 30px;
  padding: 0 20px;
}
.price{
    color: #c00000;
}
</style>
